<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>CSS大会的总结 | 宅鱼</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google-site-verification" content="yH7MwnMb7LXru16F4FAfY94pn-oZLhF8Szu4PuL7Oxw" />
  <meta name="description" content="本次大会的ppt都在w3ctech上: http://www.w3ctech.com/topic/1463个人具体的学习和总结如下: 1.手机淘宝CSS实践启示录 1.1 勾三股四讲了Web Components，主要是做前端组件，实现高度复用。资料如下:Web Components 是 W3C 定义的新标准，目前还在草案阶段。Web Components 的核心思想就是把 UI 元素组件化，即将">
<meta name="keywords" content="前端,CSS">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS大会的总结">
<meta property="og:url" content="http://ikkkr.com/2015/08/11/CSS大会的总结/index.html">
<meta property="og:site_name" content="宅鱼">
<meta property="og:description" content="本次大会的ppt都在w3ctech上: http://www.w3ctech.com/topic/1463个人具体的学习和总结如下: 1.手机淘宝CSS实践启示录 1.1 勾三股四讲了Web Components，主要是做前端组件，实现高度复用。资料如下:Web Components 是 W3C 定义的新标准，目前还在草案阶段。Web Components 的核心思想就是把 UI 元素组件化，即将">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2015-08-14T10:20:56.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS大会的总结">
<meta name="twitter:description" content="本次大会的ppt都在w3ctech上: http://www.w3ctech.com/topic/1463个人具体的学习和总结如下: 1.手机淘宝CSS实践启示录 1.1 勾三股四讲了Web Components，主要是做前端组件，实现高度复用。资料如下:Web Components 是 W3C 定义的新标准，目前还在草案阶段。Web Components 的核心思想就是把 UI 元素组件化，即将">
  
    <link rel="alternative" href="/atom.xml" title="宅鱼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico"  type="image/x-ico">
   
  <link rel="stylesheet" href="/css/style.css">
  

</head>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">宅鱼</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">部落格</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">首页</a>
        
          <a class="main-nav-link" href="/archives">文章</a>
        
          <a class="main-nav-link" href="/raincss">RainCSS</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://ikkkr.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-CSS大会的总结" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2015/08/11/CSS大会的总结/" class="article-date">
  <time datetime="2015-08-11T07:10:35.000Z" itemprop="datePublished">2015-08-11</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      CSS大会的总结
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>本次大会的ppt都在w3ctech上: <a href="http://www.w3ctech.com/topic/1463" target="_blank" rel="noopener">http://www.w3ctech.com/topic/1463</a><br>个人具体的学习和总结如下:</p>
<h2 id="1-手机淘宝CSS实践启示录"><a href="#1-手机淘宝CSS实践启示录" class="headerlink" title="1.手机淘宝CSS实践启示录"></a>1.手机淘宝CSS实践启示录</h2><hr>
<p><strong>1.1 勾三股四讲了Web Components，主要是做前端组件，实现高度复用。资料如下:</strong><br><a href="http://www.w3.org/TR/components-intro/" target="_blank" rel="noopener">Web Components</a> 是 W3C 定义的新标准，目前还在草案阶段。<br>Web Components 的核心思想就是把 UI 元素组件化，即将 HTML、CSS、JS 封装起来，使用的时候就不需要这里贴一段 HTML，那里贴一段样式，最后再贴一段 JS 了。一般来说，它其实是由四个部分的功能组成的：</p>
<ul>
<li>HTML Imports</li>
<li>HTML Templates</li>
<li>Custom Elements</li>
<li>Shadow DOM</li>
</ul>
<p>###模板<br>使用template标签来新建模板:</p>
<pre><code class="javascript">&lt;template id=<span class="string">"appTmpl"</span>&gt;
... 和之前一样的内容 ...
&lt;<span class="regexp">/template&gt;</span>
</code></pre>
<p>使用下面的 JS 就可以访问到模板，并将其插入 DOM 中。</p>
<pre><code class="javascript"><span class="keyword">var</span> tmpl = <span class="built_in">document</span>.querySelector(<span class="string">'#appTmpl'</span>);
<span class="comment">// 取到 t 以后，可以像操作 DOM 一样随意修改其中的内容</span>
<span class="comment">// 然后需要从模板创建一个深拷贝（Deep Copy），将其插入 DOM</span>
<span class="keyword">var</span> clone = <span class="built_in">document</span>.importNode(tmpl.content, <span class="literal">true</span>);
<span class="comment">// 创建深拷贝还可以使用下面的方法：</span>
<span class="comment">// var clone = tmpl.content.cloneNode(true);</span>
<span class="built_in">document</span>.body.appendChild(clone);
</code></pre>
<p>主要有四个特性：</p>
<ul>
<li>惰性：在使用前不会被渲染；</li>
<li>无副作用：在使用前，模板内部的各种脚本不会运行、图像不会加载等；</li>
<li>内容不可见：模板的内容不存在于文档中，使用选择器无法获取；</li>
<li>可被放置于任意位置：即使是 HTML 解析器不允许出现的位置，例如作为 select 的子元素。</li>
</ul>
<p>###Shadow DOM<br>Shadow DOM 是一个 HTML 的新规范，其允许开发者封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。使用 Shadow DOM，我们需要在一个元素上创建一个根（Root），然后将模板内文档添加到这个根上即可。</p>
<pre><code class="javascript">&lt;template id=<span class="string">"appTmpl"</span>&gt;
  &lt;style&gt;
  <span class="comment">/* ... 将 CSS 移动到模板内 ... */</span>
  &lt;<span class="regexp">/style&gt;</span>
<span class="regexp">  ... 原来的模板内容 ...</span>
<span class="regexp">&lt;/</span>template&gt;
&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"app"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span> 
<span class="keyword">var</span> tmpl = <span class="built_in">document</span>.querySelector(<span class="string">'#appTmpl'</span>);
<span class="keyword">var</span> host = <span class="built_in">document</span>.querySelector(<span class="string">'.app'</span>);
<span class="keyword">var</span> root = host.createShadowRoot();
root.appendChild(<span class="built_in">document</span>.importNode(tmpl.content, <span class="literal">true</span>));
</code></pre>
<p>###自定义元素Custom Elements<br>自定义元素允许开发者定义新的 HTML 元素类型。带来以下特性：</p>
<ul>
<li>定义新元素</li>
<li>元素继承</li>
<li>扩展原生 DOM 元素的 API<br>使用 document.registerElement() 创建一个自定义元素：</li>
</ul>
<pre><code class="javascript"><span class="keyword">var</span> Helloworld = <span class="built_in">document</span>.registerElement(<span class="string">"hello-world"</span>, {
  prototype: <span class="built_in">Object</span>.create(HTMLElement.prototype)
});

<span class="built_in">document</span>.body.appendChild(<span class="keyword">new</span> Helloworld());
还可以进行元素继承,扩展新的api:
<span class="keyword">var</span> MyButton = <span class="built_in">document</span>.registerElement(<span class="string">"my-button"</span>, {
  prototype: <span class="built_in">Object</span>.create(HTMLButtonElement.prototype)
});
<span class="keyword">var</span> MyButtonProto = <span class="built_in">Object</span>.create(HTMLButtonElement.prototype);

MyButtonProto.sayhello = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
  alert(<span class="string">"hello"</span>);
};

<span class="keyword">var</span> MyButton = <span class="built_in">document</span>.registerElement(<span class="string">"my-button"</span>, {
  prototype: MyButtonProto
});


<span class="keyword">var</span> myButton = <span class="keyword">new</span> MyButton();
<span class="built_in">document</span>.body.appendChild(myButton);

myButton.sayhello(); <span class="comment">// alert: "hello"</span>
使用<span class="keyword">new</span>来进行实例化
<span class="keyword">var</span> myButton = <span class="keyword">new</span> MyButton();
myButton.innerHTML = <span class="string">'click me!'</span>;
<span class="built_in">document</span>.body.appendChild(myButton);
或者在页面使用标签:
&lt;my-button&gt;click me!<span class="xml"><span class="tag">&lt;/<span class="name">my-button</span>&gt;</span></span>
</code></pre>
<p>生命周期<br>元素可以定义特殊的方法，来注入其生存周期内的关键时间点。生命周期的回调函数名称和时间点对应关系如下：</p>
<ul>
<li>createdCallback: 创建元素实例时</li>
<li>attachedCallback: 向文档插入实例时</li>
<li>detachedCallback: 从文档移除实例时</li>
<li><p>attributeChangedCallback(attrName, oldVal, newVal): 添加，移除，或修改一个属性时</p>
<pre><code class="javascript"><span class="keyword">var</span> MyButtonProto = <span class="built_in">Object</span>.create(HTMLButtonElement.prototype);

MyButtonProto.createdCallback = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
  <span class="keyword">this</span>.innerHTML = <span class="string">'Click Me!'</span>;
};

MyButtonProto.attachedCallback = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
  <span class="keyword">this</span>.addEventListener(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{
    alert(<span class="string">'hello world'</span>);
  });
};

<span class="keyword">var</span> MyButton = <span class="built_in">document</span>.registerElement(<span class="string">'my-button'</span>, {
  prototype: MyButtonProto
});

<span class="keyword">var</span> myButton = <span class="keyword">new</span> MyButton();
<span class="built_in">document</span>.body.appendChild(myButton);
</code></pre>
<p>###HTML Imports</p>
<pre><code class="html">通过<span class="tag">&lt;<span class="name">link</span>&gt;</span>标签来引入 HTML 文件，使得我们可以用不同的物理文件来组织代码。
<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"import"</span> <span class="attr">href</span>=<span class="string">"http://example.com/component.html"</span> &gt;</span>
</code></pre>
<p><a href="http://segmentfault.com/a/1190000002931974" target="_blank" rel="noopener">资料:跟 Web Components 打个啵</a><br><a href="http://zorro.io" target="_blank" rel="noopener">http://zorro.io</a></p>
</li>
</ul>
<p><strong>1.2 勾股还讲了关于手机淘宝的响应式开发处理方案</strong></p>
<hr>
<p><strong>em为单位:</strong><br>这种技术需要一个参考点，一般都是以&lt;body&gt; 的”font-size”为基准。比如说我们使用”1em”等于”10px”来改变默认值”1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为”1.4em”。<br>计算公式是：1 ÷ 父元素的font-size × 需要转换的像素值 = em值。<br><strong>Rem为单位</strong><br>CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。我在根元素 &lt;html&gt; 中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。<br><strong>lib-flexible 可伸缩布局方案</strong><br><a href="https://github.com/amfe/lib-flexible" target="_blank" rel="noopener">https://github.com/amfe/lib-flexible</a><br><a href="https://www.npmjs.com/package/px2rem" target="_blank" rel="noopener">https://www.npmjs.com/package/px2rem</a></p>
<ul>
<li>break by-self</li>
<li>focus on the scenes</li>
<li>find a platform</li>
<li>choose the “right”</li>
<li>use the “power”</li>
<li>keep walking fast</li>
</ul>
<h2 id="2-New-W3C-CSS-Checker"><a href="#2-New-W3C-CSS-Checker" class="headerlink" title="2.New W3C CSS Checker"></a>2.New W3C CSS Checker</h2><hr>
<p>Mike Smith讲w3c在开搞新的css checker <a href="https://csschecker.w3.org" target="_blank" rel="noopener">https://csschecker.w3.org</a>。顺便说了下新语言Rust，确实太新了，14年底刚刚出来。顺带还透露Servo, Mozilla’s next-generation browser engine。撸码圈又多了新的语言了。。。</p>
<h2 id="3-CSS-预处理器与-CSS-后处理器"><a href="#3-CSS-预处理器与-CSS-后处理器" class="headerlink" title="3.CSS 预处理器与 CSS 后处理器"></a>3.CSS 预处理器与 CSS 后处理器</h2><hr>
<p>###CSS 预处理器<br>广义上说，目标格式为 CSS 的预处理器是CSS 预处理器，但本文特指以最终生成 CSS 为目的的领域特定语言。Sass、LESS、Stylus是目前最主流的 CSS预处理器。编译前与编译后是完全不同的语言。</p>
<p>###CSS 后处理器<br>CSS 后处理器是对 CSS 进行处理，并最终生成 CSS 的预处理器，它属于广义上的CSS 预处理器。我们很久以前就在用CSS 后处理器了，最典型的例子是CSS 压缩工具（如clean-css），只不过以前没单独拿出来说过。还有最近比较火的Autoprefixer，以Can I Use上的浏览器支持数据为基础，自动处理兼容性问题。编译前与编译后的代码都是 CSS。</p>
<p>###优秀的 CSS 后处理器框架<br>1.Rework<br>2.PostCSS<br>PostCSS是一个CSS后处理器框架，允许你通过 JavaScript 对 CSS 进行修改。是从Autoprefixer项目中抽象出的框架。</p>
<p>###PostCSS有以下特点：<br>它和Rework非常相似，但提供了更高级的API，更易扩展它可以在现有Source Map的基础上生成新的Source Map在原有 CSS 格式的保留方面做的更好，便于开发编辑器插件比Rework更年轻，还只有Autoprefixer一个成功案例其实Autoprefixer最初是基于Rework做的，但后来作者有更多需求（上面的列表），就造了PostCSS这个轮子。</p>
<p>###用法：<br>安装nodejs<br>安装npm</p>
<pre><code class="javascript">npm install gulp -g
npm install postcss -g
npm install gulp-postcss -g 
npm install cssnext -g
npm install autoprefixer -g

npm install gulp --save--dev
npm install postcss --save--dev 
npm install gulp-postcss --save--dev 
npm install cssnext --save--dev
npm install autoprefixer --save--dev
</code></pre>
<p>新建gulpfile.js,设置解析方式:</p>
<pre><code class="javascript"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);
<span class="keyword">var</span> postcss = <span class="built_in">require</span>(<span class="string">'gulp-postcss'</span>);
<span class="keyword">var</span> autoprefixer = <span class="built_in">require</span>(<span class="string">'autoprefixer'</span>);
<span class="keyword">var</span> cssnext = <span class="built_in">require</span>(<span class="string">'cssnext'</span>);
<span class="keyword">var</span> opacity = <span class="function"><span class="keyword">function</span> (<span class="params">css, opts</span>) </span>{
    css.eachDecl(<span class="function"><span class="keyword">function</span>(<span class="params">decl</span>) </span>{
        <span class="keyword">if</span> (decl.prop === <span class="string">'opacity'</span>) {
            decl.parent.insertAfter(decl, {
                prop: <span class="string">'-ms-filter'</span>,
                value: <span class="string">'"progid:DXImageTransform.Microsoft.Alpha(Opacity='</span> + (<span class="built_in">parseFloat</span>(decl.value) * <span class="number">100</span>) + <span class="string">')"'</span>
            });
        }
    });
};

gulp.task(<span class="string">'css'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
    <span class="keyword">var</span> processors = [
        autoprefixer({<span class="attr">browsers</span>: [<span class="string">'last 1 version'</span>]}),
        opacity,
        cssnext()
    ];
    <span class="keyword">return</span> gulp.src(<span class="string">'./*.css'</span>)
        .pipe(postcss(processors))
        .pipe(gulp.dest(<span class="string">'./dest'</span>));
});
</code></pre>
<p>运行gulp进行处理,后面带上task的名称:</p>
<pre><code class="javascript">gulp css
</code></pre>
<p>text.css:</p>
<pre><code class="javascript">.container{
    display: flex;
    opacity: <span class="number">.2</span>;
}
<span class="comment">/* 变量 */</span>
:root {
--fontSize: <span class="number">14</span>px;
--mainColor: #333;
--highlightColor: hwb(<span class="number">190</span>, <span class="number">35</span>%, <span class="number">20</span>%);
}
<span class="comment">/* 自定义 media queries */</span>
@custom-media --viewport-medium (min-width: <span class="number">760</span>px) and (max-width: <span class="number">990</span>px);
    <span class="comment">/* 变量引用 以及使用 calc() 运算*/</span>
    body {
    color: <span class="keyword">var</span>(--mainColor);
    font-size: <span class="keyword">var</span>(--fontSize);
    line-height: calc(<span class="keyword">var</span>(--fontSize) * <span class="number">1.5</span>);
    padding: calc((<span class="keyword">var</span>(--fontSize) / <span class="number">2</span>) + <span class="number">1</span>px);
    }
    <span class="comment">/* 颜色处理函数 */</span>
    a {
    color: color(<span class="keyword">var</span>(--highlightColor) blackness(+<span class="number">20</span>%));
    background: color(red a(<span class="number">80</span>%))
    }
    <span class="comment">/* 使用自定义 media queries */</span>
    @media (--viewport-medium) {
    .foo {
    display: flex;
    font-size: calc(<span class="keyword">var</span>(--fontSize) * <span class="number">2</span> + <span class="number">6</span>px);
    }
}
</code></pre>
<p>生成的代码</p>
<pre><code class="javascript">.container{
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: <span class="number">.2</span>;
    -ms-filter: <span class="string">"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"</span>;
}
<span class="comment">/* 变量 */</span>
<span class="comment">/* 自定义 media queries */</span>
<span class="comment">/* 变量引用 以及使用 calc() 运算*/</span>
body {
color: #333;
font-size: <span class="number">14</span>px;
line-height: <span class="number">21</span>px;
padding: <span class="number">8</span>px;
}
<span class="comment">/* 颜色处理函数 */</span>
a {
color: rgb(<span class="number">89</span>, <span class="number">142</span>, <span class="number">153</span>);
background: #FF0000;
background: rgba(<span class="number">255</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.8</span>)
}
<span class="comment">/* 使用自定义 media queries */</span>
@media (min-width: <span class="number">760</span>px) and (max-width: <span class="number">990</span>px) {
    .foo {
        display: -webkit-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: <span class="number">34</span>px;
    }
}
</code></pre>
<h2 id="4-Web高性能动画"><a href="#4-Web高性能动画" class="headerlink" title="4.Web高性能动画"></a>4.Web高性能动画</h2><hr>
<p>该ppt深入讲解了提高网页动画性能的各种方法,关于layout,paint,composite 有个比较具体的介绍:</p>
<pre><code class="html">浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。在渲染DOM的时候，浏览器所做的工作实际上是：
1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果（Recalculate style--样式重计算）
3. 为每个节点生成图形和位置（Layout--回流和重布局）
4. 将每个节点绘制填充到图层位图中（Paint Setup和Paint--重绘）
5. 图层作为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组）

Chrome中满足以下任意情况就会创建图层：
* 3D或透视变换（perspective transform）CSS属性
* 使用加速视频解码的 video 节点
* 拥有3D（WebGL）上下文或加速的2D上下文的 canvas 节点
* 混合插件（如Flash）
* 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
* 拥有加速CSS过滤器的元素
* 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
* 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）

需要注意的是，如果图层中某个元素需要重绘，那么整个图层都需要重绘。比如一个图层包含很多节点，其中有个gif图，gif图的每一帧，都会重回整个图层的其他节点，然后生成最终的图层位图。所以这需要通过特殊的方式来强制gif图属于自己一个图层（translateZ(0)或者translate3d(0,0,0)），CSS3的动画也是一样（好在绝大部分情况浏览器自己会为CSS3动画的节点创建图层）

简化一下上述过程，每一帧动画浏览器可能需要做如下工作：
1. 计算需要被加载到节点上的样式结果（Recalculate style--样式重计算）
2. 为每个节点生成图形和位置（Layout--回流和重布局）
3. 将每个节点填充到图层中（Paint Setup和Paint--重绘）
4. 组合图层到页面上（Composite Layers--图层重组）

如果我们需要使得动画的性能提高，需要做的就是减少浏览器在动画运行时所需要做的工作。最好的情况是，改变的属性仅仅印象图层的组合，变换（transform）和透明度（opacity）就属于这种情况
</code></pre>
<p>setTimeout的奇葩坑:</p>
<pre><code class="html">60fps是动力也是压力，因为它意味着我们只有16.7毫秒(1000 / 60)来绘制每一帧。如果使用setTimeout或者setInterval(以下统称为timer)来控制绘制，问题就来了。

首先，Timer计算延时的精确度不够。延时的计算依靠的是浏览器的内置时钟，而时钟的精确度又取决于时钟更新的频率(Timer resolution)。IE8及其之前的IE版本更新间隔为15.6毫秒。假设你设定的setTimeout延迟为16.7ms，那么它要更新两个15.6毫秒才会该触发延时。这也意味着无故延迟了 15.6 x 2 - 16.7 = 14.5毫秒。

            16.7ms
DELAY: |------------|

CLOCK: |----------|----------|
          15.6ms    15.6ms
所以即使你给setTimeout设定的延时为0ms，它也不会立即触发。目前Chrome与IE9+浏览器的更新频率都为4ms(如果你使用的是笔记本电脑，并且在使用电池而非电源的模式下，为了节省资源，浏览器会将更新频率切换至于系统时间相同，也就意味着更新频率更低)。
</code></pre>
<p>具体的介绍:<a href="http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering/" target="_blank" rel="noopener">http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering</a></p>
<h2 id="5-重拾-CSS-的乐趣（上）"><a href="#5-重拾-CSS-的乐趣（上）" class="headerlink" title="5.重拾 CSS 的乐趣（上）"></a>5.重拾 CSS 的乐趣（上）</h2><hr>
<p><a href="https://github.com/cssmagic/blog/issues/52" target="_blank" rel="noopener">https://github.com/cssmagic/blog/issues/52</a></p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2016/03/31/React-Native入门及一些问题处理/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          React Native入门及一些问题处理
        
      </div>
    </a>
  
  
    <a href="/2015/03/27/移动端事件穿透的问题处里The-event-through-in-mobile/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">移动端事件穿透的问题处里The event through in mobile</div>
    </a>
  
</nav>

  


<div class="ds-thread" data-thread-key="2015/08/11/CSS大会的总结/"></div>

</article></section>
        
          <aside id="sidebar">
  
    <div class="widget-wrap">
  <h3 class="widget-title">Github</h3>
  <div class="widget">
    <ul class="category-list"><li class="category-list-item"><a href="https://github.com/rainzhai">https://github.com/rainzhai</a></li></ul>
  </div>
</div>

  <div class="widget-wrap">
    <h3 class="widget-title">分类 Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a><span class="category-list-count">29</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/html5/">html5</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/">web development</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/blog/">blog</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/">computer science</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/java-web/">java web</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/web-development/">web development</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/算法/">算法</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/html5/">html5</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/">hybrid</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/phonegap/">phonegap</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/java-web/">java web</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">23</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/">jquery</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/web-development/">web development</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/web-development/">web development</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/算法/">算法</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/jquery/">jquery</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/php/">php</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/web-development/">web development</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/">智趣</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/游戏/">游戏</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/生活/">生活</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/未分类/">未分类</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/模块化/">模块化</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/游戏/">游戏</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/生活/">生活</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/资源/">资源</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签 Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Angularjs/">Angularjs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS-3/">CSS 3</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/D2/">D2</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DIY/">DIY</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Design/">Design</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Structure/">Structure</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/android/">android</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/app/">app</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/blog/">blog</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bug/">bug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css3/">css3</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/debug/">debug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/dojo/">dojo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/easy-ui/">easy ui</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/firefox/">firefox</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/flash/">flash</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/free-hosting/">free hosting</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/game/">game</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/geekTime/">geekTime</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html5/">html5</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hybrid/">hybrid</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ie/">ie</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ios/">ios</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">28</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery-mobile/">jquery mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jsp/">jsp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mobile/">mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/photos/">photos</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/php/">php</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/requirejs/">requirejs</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seam/">seam</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/svg/">svg</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/threejs/">threejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ued/">ued</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/w3c标准/">w3c标准</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/web/">web</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webapp/">webapp</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webgl/">webgl</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webpage/">webpage</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/wordpress/">wordpress</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/上下文/">上下文</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分享/">分享</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端/">前端</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端-Javascript-css-ES6/">前端 Javascript css ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/学习/">学习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能/">性能</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/总结/">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/效率/">效率</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/模块化/">模块化</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/游戏/">游戏</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/理论/">理论</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/生活/">生活</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/社会化网络/">社会化网络</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动/">移动</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动端开发/">移动端开发</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/编程/">编程</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/美女/">美女</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/翻译/">翻译</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/范式/">范式</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/设计模式/">设计模式</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语义网/">语义网</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语言/">语言</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/资源/">资源</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/转载/">转载</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面向对象/">面向对象</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/风景/">风景</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云 Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Angularjs/" style="font-size: 10px;">Angularjs</a> <a href="/tags/CSS/" style="font-size: 19.09px;">CSS</a> <a href="/tags/CSS-3/" style="font-size: 13.64px;">CSS 3</a> <a href="/tags/D2/" style="font-size: 10px;">D2</a> <a href="/tags/DIY/" style="font-size: 10px;">DIY</a> <a href="/tags/Design/" style="font-size: 10.91px;">Design</a> <a href="/tags/Structure/" style="font-size: 16.36px;">Structure</a> <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/app/" style="font-size: 10px;">app</a> <a href="/tags/blog/" style="font-size: 10.91px;">blog</a> <a href="/tags/bug/" style="font-size: 10px;">bug</a> <a href="/tags/css3/" style="font-size: 14.55px;">css3</a> <a href="/tags/debug/" style="font-size: 10px;">debug</a> <a href="/tags/dojo/" style="font-size: 10px;">dojo</a> <a href="/tags/easy-ui/" style="font-size: 10px;">easy ui</a> <a href="/tags/firefox/" style="font-size: 10px;">firefox</a> <a href="/tags/flash/" style="font-size: 10px;">flash</a> <a href="/tags/free-hosting/" style="font-size: 10px;">free hosting</a> <a href="/tags/game/" style="font-size: 10px;">game</a> <a href="/tags/geekTime/" style="font-size: 10px;">geekTime</a> <a href="/tags/html/" style="font-size: 13.64px;">html</a> <a href="/tags/html5/" style="font-size: 18.18px;">html5</a> <a href="/tags/hybrid/" style="font-size: 11.82px;">hybrid</a> <a href="/tags/ie/" style="font-size: 10.91px;">ie</a> <a href="/tags/ios/" style="font-size: 10px;">ios</a> <a href="/tags/java/" style="font-size: 17.27px;">java</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/jquery/" style="font-size: 15.45px;">jquery</a> <a href="/tags/jquery-mobile/" style="font-size: 10.91px;">jquery mobile</a> <a href="/tags/jsp/" style="font-size: 10px;">jsp</a> <a href="/tags/mobile/" style="font-size: 10.91px;">mobile</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/photos/" style="font-size: 10px;">photos</a> <a href="/tags/php/" style="font-size: 10px;">php</a> <a href="/tags/requirejs/" style="font-size: 10.91px;">requirejs</a> <a href="/tags/seam/" style="font-size: 10.91px;">seam</a> <a href="/tags/svg/" style="font-size: 10px;">svg</a> <a href="/tags/threejs/" style="font-size: 10px;">threejs</a> <a href="/tags/ued/" style="font-size: 10.91px;">ued</a> <a href="/tags/w3c标准/" style="font-size: 12.73px;">w3c标准</a> <a href="/tags/web/" style="font-size: 13.64px;">web</a> <a href="/tags/webapp/" style="font-size: 10.91px;">webapp</a> <a href="/tags/webgl/" style="font-size: 10px;">webgl</a> <a href="/tags/webpage/" style="font-size: 10.91px;">webpage</a> <a href="/tags/wordpress/" style="font-size: 11.82px;">wordpress</a> <a href="/tags/上下文/" style="font-size: 10px;">上下文</a> <a href="/tags/分享/" style="font-size: 10.91px;">分享</a> <a href="/tags/前端/" style="font-size: 16.36px;">前端</a> <a href="/tags/前端-Javascript-css-ES6/" style="font-size: 10px;">前端 Javascript css ES6</a> <a href="/tags/学习/" style="font-size: 10px;">学习</a> <a href="/tags/性能/" style="font-size: 12.73px;">性能</a> <a href="/tags/总结/" style="font-size: 10.91px;">总结</a> <a href="/tags/效率/" style="font-size: 11.82px;">效率</a> <a href="/tags/模块化/" style="font-size: 10.91px;">模块化</a> <a href="/tags/游戏/" style="font-size: 11.82px;">游戏</a> <a href="/tags/理论/" style="font-size: 14.55px;">理论</a> <a href="/tags/生活/" style="font-size: 10.91px;">生活</a> <a href="/tags/社会化网络/" style="font-size: 10.91px;">社会化网络</a> <a href="/tags/移动/" style="font-size: 10px;">移动</a> <a href="/tags/移动端开发/" style="font-size: 10px;">移动端开发</a> <a href="/tags/算法/" style="font-size: 13.64px;">算法</a> <a href="/tags/编程/" style="font-size: 18.18px;">编程</a> <a href="/tags/美女/" style="font-size: 10px;">美女</a> <a href="/tags/翻译/" style="font-size: 13.64px;">翻译</a> <a href="/tags/范式/" style="font-size: 12.73px;">范式</a> <a href="/tags/设计模式/" style="font-size: 11.82px;">设计模式</a> <a href="/tags/语义网/" style="font-size: 10px;">语义网</a> <a href="/tags/语言/" style="font-size: 19.09px;">语言</a> <a href="/tags/资源/" style="font-size: 10.91px;">资源</a> <a href="/tags/转载/" style="font-size: 10px;">转载</a> <a href="/tags/面向对象/" style="font-size: 10px;">面向对象</a> <a href="/tags/风景/" style="font-size: 10px;">风景</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">文章 Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">July 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">June 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">August 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">July 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">April 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">March 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/10/">October 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/09/">September 2013</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/03/">March 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/01/">January 2013</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/11/">November 2012</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/08/">August 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/06/">June 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/05/">May 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/04/">April 2012</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/02/">February 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/01/">January 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/12/">December 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/11/">November 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/10/">October 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/09/">September 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/08/">August 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/07/">July 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/06/">June 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/04/">April 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/02/">February 2011</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/01/">January 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/12/">December 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/11/">November 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/10/">October 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/09/">September 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/08/">August 2010</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/06/">June 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/04/">April 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/01/">January 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2009/08/">August 2009</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最近 Recents</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2018/07/23/nvm安装问题处理-nvm-is-not-compatible-with-the-npm-config-prefix-option-错误/">nvm安装问题处理 nvm is not compatible with the npm config prefix option 错误</a>
          </li>
        
          <li>
            <a href="/2018/06/06/前端知识体系大全/">前端知识体系大全</a>
          </li>
        
          <li>
            <a href="/2016/08/28/使用Angularjs开发控制台类项目/">使用Angularjs开发控制台类项目</a>
          </li>
        
          <li>
            <a href="/2016/07/11/Apicloud开发app的问题总结/">Apicloud开发app的问题总结</a>
          </li>
        
          <li>
            <a href="/2016/04/25/前端面试经典问题/">前端面试经典问题</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-wrap">
<h3 class="widget-title">友情链接 Links</h3>
<div class="widget">
<ul>
<li><a href="http://wande.me" title="玩的么" target="_blank">玩的么</a></li>
</ul>
</ul>
</div>
  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2018 宅鱼<br>
      更多游戏： <a href="http://wande.me"  target="_blank">玩的么</a><br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">文章</a>
  
    <a href="/raincss" class="mobile-nav-link">RainCSS</a>
  
</nav>
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"rainzhai"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共JS代码 end -->

<script type="text/javascript" src="http://wandeme.com/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F49ba6eabd43121d820d9120777bdaf30' type='text/javascript'%3E%3C/script%3E"));
</script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>